<!--
 * @Author: taosong 2289713738@qq.com
 * @Date: 2023-12-16 12:55:58
 * @LastEditors: taosong 2289713738@qq.com
 * @LastEditTime: 2023-12-19 16:01:01
 * @FilePath: \ele-h5\src\views\tabs\TabsView.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import { ref, watch } from 'vue'
import { RouterView, useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const active = ref(route.name as string)

watch(active, (newValue) => {
  router.push({
    name: newValue
  })
})
</script>

<template>
  <RouterView />
  <VanTabbar v-model="active">
    <VanTabbarItem name="home" icon="home-o">首页</VanTabbarItem>
    <VanTabbarItem name="order" icon="bars">订单</VanTabbarItem>
    <VanTabbarItem name="me" icon="contact">我的</VanTabbarItem>
  </VanTabbar>
</template>

<style scoped>
.center {
  text-align: center;
}
</style>
